<!DOCTYPE html>
<html>
<head>
 <style>
 ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
 }
 li {
 float: left;
 }
 li a,
 .dropbtn {
 display: inline-block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 }
 li a:hover,
 .dropdown:hover .dropbtn {
 background-color: red;
 }
 li.dropdown {
 display: inline-block;
 }
 .dropdown-content {
 display: none;
 position: absolute;
 background-color: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 z-index: 1;
 }
 .dropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: left;
 }
 .dropdown-content a:hover {
 background-color: #f1f1f1;
 }
 .dropdown:hover .dropdown-content {
 display: block;
}
 </style>
</head>
<body>
 <ul>
 <li><a href="#home">首页</a></li>
 <li><a href="#news">新闻</a></li>
 <li class="dropdown">
 <a href="javascript:void(0)" class="dropbtn">运动</a>
 <div class="dropdown-content">
 <a href="#">足球</a>
 <a href="#">篮球</a>
 <a href="#">排球</a>
 </div>
 </li>
 </ul>
 <h1>导航栏内的下拉菜单</h1>
 <p>请悬停到 "运动" 链接上，以查看下拉菜单。</p>
</body>
</html>
